<template lang="pug">
  section
    .map-count
</template>

<script>
import home from './api'
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/gauge'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/legendScroll'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/markLine'

export default {
  mounted() {
    let mapCount = echarts.init(document.querySelector('.map-count'))
    const instrumentPanelChart = {
      series: [
        {
          type: 'gauge',
          startAngle: 180,
          endAngle: 0,
          radius: 116,
          splitNumber: 1,
          center: ['50%', '60%'],
          min: 0,
          max: 5000,
          // 仪表盘轴线相关配置，用于显示仪表盘轴线及不同颜色断
          axisLine: {
            show: true,
            lineStyle: {
              width: 40,
              color: [[0.97, '#36ce9b'], [1, '#ccc']]
            }
          },
          splitLine: {
            show: false,
            length: 20
          },
          axisTick: {
            show: false
          },
          // 刻度标签，用于显示仪表盘刻度
          axisLabel: {
            show: true,
            distance: -18,
            padding: [25, 0, 0, 0],
            fontSize: 12
          },
          pointer: {
            show: false
          },
          // 仪表盘标题，用于显示仪表盘相关的配置
          title: {
            show: true,
            offsetCenter: [0, 0],
            color: '#36ce9b'
          },
          // 仪表盘详情，用于显示数据
          detail: {
            show: true,
            offsetCenter: [0, '30%'],
            formatter: '{value}',
            fontSize: 18,
            color: '#000'
          },
          data: [
            {
              value: '125',
              name: '80%'
            }
          ],
          tooltip: {
            position: [10, 10],
            formatter: '123'
          }
        }
      ]
    }
    const lineChart = {
      tooltip: {
        // 提示配置
        trigger: 'axis',
        formatter: params => {
          // 提示格式化
          return `${params[0].seriesName}:${params[0].value}`
        }
      },
      legend: {
        // 图例组件，展示不同系列标记，颜色和名字
        bottom: 10,
        itemWidth: 10,
        data: [
          {
            name: '成交',
            icon: 'circle'
          }
        ]
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['2018-03-08', '2018-03-09', '2018-03-10', '2018-03-22', '2018-03-14', '2018-03-17', '2018-03-20']
      },
      yAxis: {
        type: 'value',
        splitLine: {
          // 分割线配置
          lineStyle: {
            type: 'dotted'
          }
        }
      },
      series: [
        {
          name: '成交',
          type: 'line',
          data: [10, 12, 21, 54, 260, 830, 710],
          markLine: {
            // 标记，用于标记平均值，最大值这种
            silent: true,
            data: [
              {
                yAxis: 500
              }
            ]
          },
          itemStyle: {
            // 折线点颜色修改
            // color: '#00FF00'
            color: '#DA8084'
          },
          lineStyle: {
            // 折线颜色修改
            // color: '#00FF00'
            color: '#DA8084',
            width: 2,
            type: 'solid'
          },
          label: { show: true, position: 'top' },
          symbol: 'circle',
          symbolSize: 10
        }
      ]
    }
    const barChart = {
      legend: {
        data: ['销量']
      },
      xAxis: [
        {
          type: 'category',
          data: ['石家庄市', '张家口市', '承德市', '秦皇岛市', '唐山市']
        }
      ],
      yAxis: {
        type: 'value'
      },
      tooltip: {
        show: true,
        formatter: '{c}'
      },
      series: [
        {
          type: 'bar',
          name: '销量',
          label: {
            show: true,
            position: 'top',
            color:'#000'
          },
          itemStyle: {
            color: '#00b2f1'
          },
          data: [2800, 1700, 1200, 1000, 900]
        }
      ]
    }
    mapCount.setOption(barChart)
  }
}
</script>

<style lang="scss">
.map-count {
  width: 500px;
  height: 500px;
  border: 1px solid #ccc;
  margin: 20px 50px;
}
</style>


